import services from '@/services/log';
import {ActionType, PageContainer, ProColumns, ProTable,} from '@ant-design/pro-components';
import React, {useRef, useState} from 'react';

const {page} = services.LoginLogController;





const TableList: React.FC<unknown> = () => {
    const actionRef = useRef<ActionType>();
    const [current, setCurrent] = useState(1); // 当前页码
    const [pageSize, setPageSize] = useState(10); // 每页显示条数

    const columns: ProColumns<API.LoginLog>[] = [
        {
            title: '登录时间',
            dataIndex: 'loginTime',
            valueType: 'text',
        },
        {
            title: '用户名',
            dataIndex: 'userName',
            tooltip: '唯一的 key',
        },
        {
            title: '登录名',
            dataIndex: 'loginName',
            valueType: 'text',
            search: false,
        },
        {
            title: '登录类型',
            dataIndex: 'type',
            valueType: 'text',
            search: false,
        },
        {
            title: '状态',
            dataIndex: 'status',
            valueEnum: {
                0: {text: '失败', status: '0'},
                1: {text: '成功', status: '1'},
            },
        },
        {
            title: '类token来源',
            dataIndex: 'platform',
            valueType: 'text',
            search: false,
        },
        {
            title: '访问设备信息',
            dataIndex: 'userAgent',
            valueType: 'text',
            search: false,
        },
        {
            title: '登录的IP',
            dataIndex: 'ipAddress',
            valueType: 'text',
            search: false,
        },
        {
            title: 'ip归属地',
            dataIndex: 'ipRegion',
            valueType: 'text',
            search: false,
        },
        {
            title: '备注',
            dataIndex: 'description',
            valueType: 'text',
            search: false,
        }
    ];

    return (
        <PageContainer
            header={{
                title: '',
            }}
        >
            <ProTable<API.LoginLog>
                headerTitle="查询用户"
                actionRef={actionRef}
                rowKey="id"
                search={{
                    labelWidth: 120,
                }}
                pagination={{
                    current, // 当前页码
                    pageSize, // 每页条数
                    showSizeChanger: true, // 是否可以改变 pageSize
                    pageSizeOptions: ['5', '10', '20', '50'], // 自定义每页条数下拉选项
                    onChange: (page, pageSize) => { // 页码或 pageSize 改变的回调。
                      setCurrent(page);
                      setPageSize(pageSize);
                    },
                    onShowSizeChange: (current, size) => {// pageSize 改变的回调。
                      setCurrent(current);
                      setPageSize(size);
                    },
                  }}
                // , sorter, filter
                request={async (params) => {
                    const finds: API.LoginLogPage = {
                        userAgent: params.userAgent ? params.userAgent : undefined,
                        ipRegion: params.ipRegion ? params.ipRegion : undefined,
                        loginTime: params.loginTime ? params.loginTime : undefined,
                        userName: params.userName ? params.userName : undefined,
                        status: params.status ? params.status : undefined,
                        page: {
                            pageIndex: params.current,
                            pageSize: params.pageSize,
                        },
                    };
                    const {data, success} = await page({
                        ...finds,
                        // FIXME: remove @ts-ignore
                        // @ts-ignore
                        // sorter,
                        // filter,
                    });
                    return {
                        data: data?.rows || [],
                        total: data?.total,
                        pageSize: data?.pageSize,
                        current: data?.currentPage,
                        success,
                    };
                }}
                columns={columns}
            />
        </PageContainer>
    );
};

export default TableList;
